<template>
<div class="mallGoods-wrap">
    <div class="fixed header">
        <van-nav-bar :title="'选择 ['+category.title + ']下的商品'" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <van-icon name="search" slot="right" />
            <van-icon name="cross" size="1.5rem" slot="left" />
        </van-nav-bar>
        <transition name="van-slide-down">
            <div v-show="visible">
                <van-search v-model="searchValue" placeholder="请输入搜索关键词" show-action shape="round">
                    <div slot="action" @click="onSearch">搜索</div>
                </van-search>
                <van-popup v-model="searchShow" position="bottom" :style="{ height: '100%' }">
                  <div class="closeSearch">
                    <van-icon style="position: absolute;right: 1rem;top:.5rem" size="2rem" name="close" @click="searchShow = false" />
                  </div>
                    <div class="searchGoodsList shadow">
                        <van-card class="good" v-for="(good,index) in searchList" :key="index" :price="good.price" :title="good.sort_title" :thumb="good.avatar">
                            <van-button class="goods-btn" slot="num" size="mini" type="info" @click="getGood(good.id)">选择</van-button>
                        </van-card>
                    </div>
                </van-popup>
            </div>
        </transition>
    </div>
    <div class="goodsList shadow">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getGoodsData">
            <van-card class="good" v-for="(good,index) in list" :key="index" :price="good.price" :title="good.sort_title" :thumb="good.avatar">
                <van-button v-if="!good.is_sync" class="goods-btn" slot="num" size="mini" type="info" @click="getGood(good.id)">选择 </van-button>
            </van-card>
        </van-list>
    </div>
</div>
</template>

<script>
import http from 'axios'
import {
    Toast,
    Search,
    Notify
} from 'vant';
export default {
    name: 'MallGoods',
    props: {
        category: [Object, Array],
        category_id: [Number,String]
    },
    data() {
        return {
            list: [],
            loading: true,
            finished: false,
            c_page: 1,
            l_page: null,
            searchValue: null,
            visible: false,
            searchList: null,
            searchShow: false
        }
    },
    created() {
        this.getGoodsData();
        console.log(this.category);
        console.log(123);
    },
    methods: {
        getGoodsData() {
            let toekn = sessionStorage.getItem('token');
            let params = {};
            params.page = this.c_page
            params.token = toekn;
            http.get('/api/store/index/goods/' + this.category.id, {
                params
            }).then(r => {
                if (r.data.data.current_page <= r.data.data.last_page) {
                    this.c_page = r.data.data.current_page + 1;
                    this.l_page = r.data.data.last_page;
                    if (r.data.data.current_page == 1) {
                        this.list = r.data.data.data;
                    } else {
                        this.list = [...this.list, ...r.data.data.data];
                    }
                    this.loading = false;
                } else {
                    this.loading = false;
                    this.finished = true
                }
            })
        },
        onClickLeft() {
            this.$emit('open')
        },
        onClickRight() {
            this.visible = !this.visible
        },
        onSearch() {
            if (!this.searchValue) {
                this.$toast('请输入内容')
            } else {
                Toast.loading({
                    mask: true,
                    message: '加载中...'
                });
                let params = {
                    token: sessionStorage.getItem('token'),
                    keywords: this.searchValue
                };
                http.get('/api/store/index/data/'+this.category.id, {
                    params
                }).then(r => {
                    if(r.data.data.data.length == 0){
                      Toast('没有相关商品');
                    }else {
                      Toast('加载成功');
                      this.searchShow = true;
                      this.searchList = r.data.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        },
        getGood(e) {
            let toekn = sessionStorage.getItem('token');
            let params = {};
            params.token = toekn;
            params.good_id = e;
            http.post('/api/store/manager/good/sync_good/'+this.category_id, params).then(r => {
                Notify({
                    type: 'primary',
                    message: r.data.message,
                    background: '#07c160'
                });
            }).catch(err => {
                Notify({
                    type: 'error',
                    message: err.response.data.message
                });
            })
        }
    }
}
</script>

<style lang="less" scoped>
.mallGoods-wrap {
    padding-top: 50px;

    .good {
        margin: .5rem;
        padding: .5rem 0;
        box-shadow: 0px 0px 40px -10px rgba(0, 64, 128, 0.35);
    }

    .goods-btn {
        position: absolute;
        bottom: .25rem;
        right: .25rem;
        // margin-right: .5rem;
    }

    .header {
        top: 0;
        left: 0;
        right: 0;
        z-index: 10
    }

    .searchGoodsList {
        padding: 3rem 0 .5rem;
        background-color: white;
    }

    .closeSearch {
      top: 0;
      left: 0;
      right: .5rem;
    }
}
</style>
